<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        定位 position 偏移位置 通过left right top bottom进行位置偏移的
            position:static 默认值 不定位
            position:relative; 相对定位
                    1，相对自身的位置（原本）进行偏移，偏移之后的距离会被保留，通过left
                    right,top bottom进行位置偏移的，可以取负值
                    2，不脱离文档流，占位的

            什么情况下用相对定位？
                1,如果想让标签自己走，不影响其他标签
                2，给绝对定位找参照物（最多）

     -->
     <style>
         *{padding:0; margin:0;}
         .all{
             width:1000px; height:400px; border:solid 3px #000;
             margin: 100px auto;
         }
         .box1{
             width:200px; height:200px;
             background: red;
             float:left;
         }
         .box2{
             width:200px; height:200px;
             background: green;
             float:left;
             position: relative;
             /* 相对定位 */
             bottom:-50px;
             /* 距离左边偏移100px */
             right:-50px;
         }
           .box3{
             width:200px; height:200px;
             background: blue;
             float:left;
         }
     </style>
</head>
<body>
    <div class="all">
        <div class="box1">11</div>
        <div class="box2">22</div>
        <div class="box3">33</div>
    </div>
 
    <div>
        <img src="images/bg.png" alt="">
        <p  style="position:relative;top:-50px;">这是吴京</p>
    </div> 
    <span>你好</span>
 
</body>
</html>